
<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">新增矿机</div>
    </div>
    <div class="banner">
      <div class="item">
        <span class="itemTitle">设备UID</span>
        <Input style="width:200px;" v-model="uid" />
      </div>
      <div class="item">
        <span class="itemTitle">矿机编号</span>
        <Input style="width:200px;" v-model="id" />
      </div>
      <div class="item">
        <span class="itemTitle">订单编号</span>
        <Input style="width:200px;" v-model="dingId" />
      </div>
      <div class="item">
        <span class="itemTitle">位置</span>
        <Input style="width:200px;" v-model="position" />
      </div>
      <div class="foot">
        <Button type="primary" @click="sub">提交</Button>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";
export default {
  name: "AddDevice",
  data() {
    return {
      uid: "",
      id: "",
      dingId: "",
      position: ""
    };
  },
  methods: {
    sub() {
      if (!this.id) {
        this.$Message.warning("矿机编号不能为空");
        return;
      }

      this.$Modal.confirm({
        title: "确认提交信息",
        content:
          "<div>设备UID：" +
          this.uid +
          "</div>" +
          "<div>矿机编号:" +
          this.id +
          "</div>" +
          "<div>订单号:" +
          this.dingId +
          "</div>" +
          "<div>位置:" +
          this.position +
          "</div>",
        onOk: () => {
          let payload = {
            address: this.position,
            iotfsUid: this.uid,
            minerNo: this.id,
            orderNo: this.dingId
          };

          let token = this.$localStorage.storageGet("TOKEN");
          if (!token) {
            this.$router.push({
              name: "Login"
            });
            return;
          }

          this.$axios({
            method: "post",
            url: apis.deviceAdd,
            headers: {
              "Content-Type": "application/json",
              Authorization: "Bearer " + token
            },
            data: payload
          })
            .then(res => {
              console.log(res);
              if (res.status == "201") {
                this.$Message.info("已创建");
                this.$router.push({
                  name: "DeviceList"
                });
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消提交");
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.wrapp {
  padding: 0 20px;
}
.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}
.banner {
  margin-top: 20px;
}
.title {
  color: #666;
  font-size: 24px;
}
.item {
  margin-top: 15px;
  display: flex;
}
.itemTitle {
  width: 150px;
  text-align: left;
  margin-right: 20px;
  font-size: 20px;
}
.foot {
  margin-top: 20px;
}
</style>